// 获取 tbody 标签
const tbody = document.querySelector(".nav .teacherList");

// 获取 nav 标签
const nav = document.querySelector(".nav");

// 后端 api 接口的地址
const apiUrl = "https://api.monkeymeerkat.cn";

// 给 按钮添加 事件委托
nav.addEventListener("click", (e) => {
  if (e.target.tagName === "INPUT") {
    // 获取点击的 老师ID
    const teacherId = +e.target.dataset.teacherid;
    // 判断是修改请求还是删除请求
    if (e.target.value === "修改") {
      // 修改请求
      location.href = "./update.html?teacherId=" + teacherId;
    } else if (e.target.value === "删除" && confirm("确认删除？")) {
      // 调用 删除老师 函数
      delTeacher(teacherId);
    }
  }
});

// // 删除老师 函数（原生JS）
// function delTeacher(teacherId) {
//   // 异步请求
//   setTimeout(() => {
//     fetch(`${apiUrl}/teachers/` + teacherId, {
//       // 请求方法
//       method: "delete",
//       // 请求头
//       headers: { "Content-Type": "Authorization" },
//     })
//       .then((response) => {
//         // 如果状态码 200 则请求成功
//         if (response.status === 200) {
//           // 解析响应体为 JSON
//           return response.json();
//         }
//         // 否则 抛出异常及当前状态码
//         throw new Error(`HTTP error! Status: ${response.status}`);
//       })
//       .then((data) => {
//         if (data.code === 200) {
//           // 刷新页面
//           // location.href = "./index.html";

//           // 试着直接移除 节点
//           document.querySelector(`[data-trid='${teacherId}']`).remove();
//         } else {
//           // 提示信息
//           console.log(data.message);
//         }
//       })
//       .catch((error) => {
//         console.error(error);
//       });
//   }, 100);
// }

// 删除老师 函数（JQuery库）
function delTeacher(teacherId) {
  // 异步请求
  setTimeout(() => {
    fetch(`${apiUrl}/teachers/` + teacherId, {
      // 请求方法
      method: "delete",
      // 请求头
      headers: { "Content-Type": "Authorization" },
    })
      .then((response) => {
        // 如果状态码 200 则请求成功
        if (response.status === 200) {
          // 解析响应体为 JSON
          return response.json();
        }
        // 否则 抛出异常及当前状态码
        throw new Error(`HTTP error! Status: ${response.status}`);
      })
      .then((data) => {
        if (data.code === 200) {
          // 刷新页面
          // location.href = "./index.html";

          // 试着直接移除 节点
          $(`[data-trid='${teacherId}']`).remove();

          // 重新渲染
          getTeachers();
        } else {
          // 提示信息
          console.log(data.message);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }, 100);
}

// 获取 分页模块的按钮
const inputs = document.querySelectorAll(`#paging input`);

// 给添加老师按钮一个跳转
inputs[2].addEventListener("click", () => {
  // 跳转到添加老师的请求路径
  location.href = "./add.html";
});

/**
 * 分页的默认配置
 */
// 存储老师列表
let teachersList = [];
// 默认每页限制条数
const limitNumber = 5;
// 当前页面数
let pageNumber = 1;
// 最大页码数
let totalPage = 1;

// 分页函数
function paging() {
  // 自动改变页码
  $(`#paging > span`).html(`第 ${pageNumber} 页`);

  // 最大页码 赋值
  totalPage =
    limitNumber !== 0 ? Math.ceil(teachersList.length / limitNumber) : 0;
  // 起始索引
  const nowIndex = (pageNumber - 1) * limitNumber;
  // 结尾索引
  const maxIndex = Math.min(nowIndex + limitNumber, teachersList.length);

  // 遍历渲染老师列表
  teachersList.slice(nowIndex, maxIndex).forEach((teacher) => {
    const content = `
      <tr data-trId="${teacher.id}">
          <td>${teacher.id}</td>
          <td>${teacher.teacherName}</td>
          <td>${teacher.teacherAge}</td>
          <td>${teacher.teacherSex}</td>
          <td>${teacher.phone}</td>
          <td>${teacher.className}</td>
          <td>
              <input type="button" value="修改" data-teacherId='${teacher.id}' />
              <input type="button" value="删除" data-teacherId='${teacher.id}' />
          </td>
      </tr>
      `;
    // 添加提示内容
    $(".teacherList").append(content);
  });
}

// 上一页
inputs[3].addEventListener("click", () => {
  // 页面减一
  pageNumber--;

  // 拦截是否继续往下执行
  if (teachersList.length === 0) {
    // 提示暂无数据 并 退出函数
    alert("暂无数据");
    return;
  } else {
    // 校验 上一页 最小页码
    if (pageNumber <= 0) {
      // 还原最小页码
      pageNumber = 1;
      // 页码不能再小了
      alert("页码不能再小了");
    }
  }

  // 清空内容
  $(".teacherList tr").remove();

  // 使用分页函数
  paging();
});

// 下一页
inputs[4].addEventListener("click", () => {
  // 页面加一
  pageNumber++;

  // 拦截是否继续往下执行
  if (teachersList.length === 0) {
    // 提示暂无数据 并 退出函数
    alert("暂无数据");
    return;
  } else {
    // 校验 下一页 最大页码
    if (pageNumber > totalPage) {
      // 还原最大页码
      pageNumber = totalPage;
      // 已经是最后一页了
      alert("已经是最后一页了");
    }
  }

  // 清空内容
  $(".teacherList tr").remove();

  // 使用分页函数
  paging();
});

// 获取 tbody 标签
const queryForm = document.querySelector(".nav #queryForm");

// 监听提交事件
queryForm.addEventListener("submit", (e) => {
  // 阻止默认行为
  e.preventDefault();

  // 重新查询并渲染
  getTeachers();
});

/**
 * 渲染老师列表（原生JS）
 */
// function getTeachers() {
//   // 异步请求
//   setTimeout(() => {
//     // 拿到 查询输入框的值
//     const queryValue = inputs[0].value.trim();

//     // fetch 请求
//     fetch(`${apiUrl}/teachers?query=${queryValue}`, {
//       // 请求方法
//       method: "get",
//       // 请求头
//       headers: { "Content-Type": "Authorization" },
//     })
//       .then((response) => {
//         // 如果状态码 200 则请求成功
//         if (response.status === 200) {
//           // 解析响应体为 JSON
//           return response.json();
//         }
//         // 否则 抛出异常及当前状态码
//         throw new Error(`HTTP error! Status: ${response.status}`);
//       })
//       .then((data) => {
//         if (data.code === 200) {
//           // 如果列表为空
//           if (data.data === null) {
//             // 重新把查询的数据显示在页面上
//             tbody.innerHTML =
//               `
//               <tr>
//                   <td colspan="7" style="padding: 20px;">${data.message}</td>
//               <tr>
//             `;
//           } else {
//             // 查询到的老师列表
//             const teachers = data.data.map((teacher) => {
//               return `
//                   <tr>
//                       <td>${teacher.id}</td>
//                       <td>${teacher.teacherName}</td>
//                       <td>${teacher.teacherAge}</td>
//                       <td>${teacher.teacherSex}</td>
//                       <td>${teacher.phone}</td>
//                       <td>${teacher.className}</td>
//                       <td>
//                           <input type="button" value="修改" data-teacherId='${teacher.id}' />
//                           <input type="button" value="删除" data-teacherId='${teacher.id}' />
//                       </td>
//                   </tr>
//                   `;
//             });

//             // 重新把查询的数据显示在页面上
//             tbody.innerHTML = teachers.join("");
//           }
//         }
//       })
//       .catch((error) => {
//         console.error(error);
//       });
//   }, 100);
// }

/**
 * 渲染老师列表（JQuery库）
 */
function getTeachers() {
  // 异步请求
  setTimeout(() => {
    // 拿到 查询输入框的值
    const queryValue = $("#queryContent").val().trim();

    // fetch 请求
    fetch(`${apiUrl}/teachers?query=${queryValue}`, {
      // 请求方法
      method: "get",
      // 请求头
      headers: { "Content-Type": "Authorization" },
    })
      .then((response) => {
        // 如果状态码 200 则请求成功
        if (response.status === 200) {
          // 解析响应体为 JSON
          return response.json();
        }
        // 否则 抛出异常及当前状态码
        throw new Error(`HTTP error! Status: ${response.status}`);
      })
      .then((data) => {
        if (data.code === 200) {
          // 清空内容
          $(".teacherList tr").remove();

          // 重新回到第一页
          pageNumber = 1;

          // 如果列表为空
          if (data.data === null) {
            // 老师列表默认为空
            teachersList = [];

            // 改变页码
            $(`#paging > span`).html(`第 ${pageNumber} 页`);

            // 重新添加提示内容
            $(".teacherList").append(`
              <tr>
                  <td colspan="7" style="padding: 20px;">${data.message}</td>
              <tr>
            `);
          } else {
            // 存储老师列表
            teachersList = data.data;

            // 调用分页函数
            paging();
          }
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }, 100);
}

// 查询所有老师信息
getTeachers();
